<template>
  <view class="container">
    <view class="title">
      {{ chapterName }}
    </view>
    <template v-if="!isShowMeaning">
      <view class="content">
        <view class="box">
          <view class="box_title">
            <text>听词拼写</text>
          </view>
          <view class="word">
            <view class="word_content">
              <view class="word_icon" @click="play()">
                <image
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/horn.png"
                  mode="widthFix"
                ></image>
              </view>
            </view>
          </view>
          <view class="text">
            <view class="text_content">
              <text @click="wordMeaningSwitch()"
                >{{ wordMeaningText }}词义</text
              >
            </view>
            <text v-show="isShowWordMeaning">{{ wordParaphrase }}</text>
          </view>
          <view class="progress">
            <u-circle-progress
              active-color="rgb(9, 129, 188)"
              inactive-color="rgba(9, 129, 188, 0.35)"
              :percent="percent"
              bg-color="rgba(0,0,0,0)"
            >
              <view class="u-progress-content">
                <view class="u-progress-text">计时</view>
                <view class="u-progress-text">{{ countDown }}s</view>
              </view>
            </u-circle-progress>
          </view>
        </view>
        <view class="box">
          <view class="answer" v-if="!isCorrect && isShowAnswer && !isSyllabic">
            <text>正确答案：{{ wordText }}</text>
          </view>
          <view class="answer" v-else-if="isSyllabic">
            <text>{{ disyllabic }}</text>
          </view>
          <view class="input" :class="{ active: !isCorrect && isShowAnswer }">
            <input
              type="text"
              placeholder="在此输入"
              v-model.trim="answer"
              :disabled="(isShowAnswer && !isSyllabic) || isCorrect"
            />
            <view class="iamge">
              <image
                v-if="isCorrect && isShowAnswer"
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
                mode="widthFix"
              ></image>
              <image
                v-else-if="!isCorrect && isShowAnswer && !isSyllabic"
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
                mode="widthFix"
              ></image>
            </view>
          </view>
          <view class="switch">
            <view class="switch_text" v-show="isSyllabicSpelling">
              请参考分音节输入正确答案
            </view>
            <text>软键盘</text>
            <u-switch
              v-model="isShowKeyboard"
              active-color="#f6c512"
              inactive-color="#0091ea"
              size="24"
            ></u-switch>
          </view>
          <view class="keyboard">
            <Keyboard
              v-show="isShowKeyboard"
              ref="keyboard"
              :word="wordText"
              @updateAnswer="updateAnswer"
              @answerInformation="answerInformation"
            ></Keyboard>
          </view>
        </view>
      </view>
      <view class="button">
        <view
          class="button_content"
          v-if="!isShowAnswer"
          @click="determineChoice()"
        >
          <text>确定</text>
        </view>
        <view
          class="button_content"
          v-else-if="!isCorrect && isShowAnswer && !isSyllabic"
          @click="syllabicSpelling()"
        >
          <text>分音节拼写</text>
        </view>
        <view class="noop" v-else-if="!isCorrect && isShowAnswer && isSyllabic">
        </view>
        <view
          class="button_content"
          v-else-if="isCorrect || !isShowAnswer"
          @click="moreInformation()"
        >
          <text>更多资料</text>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="content">
        <view class="content_left">
          <view class="info">
            <view class="info_text1">
              {{ wordText }}
            </view>
            <view class="info_text2">
              {{ wordSoundmark }}
            </view>
            <view class="info_text1">
              {{ wordParaphrase }}
            </view>
            <view class="info_text2"> 考频：{{ wordFrequency }} </view>
          </view>
          <view class="sentence">
            <view class="sentence_title"> 例句 </view>
            <view class="sentence_content">
              <view class="sentence_icon" @click="playExample()">
                <image
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/horn.png"
                  mode="widthFix"
                ></image>
              </view>
              <view class="sentence_text">
                <text class="sentence_text1">
                  {{ exampleEnglish }}
                </text>
                <text class="sentence_text2">
                  {{ exampleChinese }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <view class="content_right">
          <image :src="wordImage" mode="widthFix"></image>
        </view>
      </view>
      <view class="button">
        <view class="button_content" @click="nextQuestion()">
          <text>下一题</text>
        </view>
      </view>
    </template>
    <Tips :show="showTips" :content="tipsContent"></Tips>
  </view>
</template>

<script>
const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
export default {
  components: {},
  computed: {
    percent() {
      if (this.countDown > 0) {
        return parseInt((this.countDown / this.countDownNumber) * 100);
      }
    },
  },
  props: {
    chapterData: {
      type: Object,
      default: null,
    },
    wordData: {
      type: Object,
      default: null,
    },
  },
  watch: {
    answer() {
      this.inputWord();
    },
  },
  created() {
    this.initData();
  },
  data() {
    return {
      chapterName: "",
      wordText: "",
      wordSoundmark: "",
      disyllabic: "",
      wordParaphrase: "",
      wordImage: "",
      wordFrequency: "",
      wordAudio: "",
      exampleEnglish: "",
      exampleChinese: "",
      exampleAudio: "",
      timerId: null,
      countDown: 30,
      countDownNumber: 30,
      isCorrect: false,
      isShowAnswer: false,
      isShowMeaning: false,
      wordMeaningText: "隐藏",
      isShowWordMeaning: true,
      isSyllabic: false,
      isSyllabicSpelling: false,
      isShowKeyboard: true,
      answer: "",
      isClick1: true,
      isClick2: false,
      isClick3: false,
      showTips: false,
      tipsContent: "请输入拼写单词！",
    };
  },
  methods: {
    initData() {
      this.chapterName = this.chapterData.shortName;
      this.wordText = this.wordData.word;
      this.wordParaphrase = this.wordData.wordParaphrase;
      this.wordImage = this.wordData.wordImage;
      this.wordSoundmark = this.wordData.wordSoundmark;
      this.disyllabic = this.wordData.disyllabic;
      this.wordFrequency = this.wordData.wordFrequency;
      this.wordAudio = this.wordData.wordAudio;
      if (this.wordData.sentence) {
        this.exampleEnglish = this.wordData.sentence.sentenceEnglish;
        this.exampleChinese = this.wordData.sentence.sentenceChinese;
        this.exampleAudio = this.wordData.sentence.sentenceAudio;
      }
      this.play();
      this.timer();
    },
    play() {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.wordAudio;
      englishAudioContext.play();
    },
    playExample() {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.exampleAudio;
      englishAudioContext.play();
    },
    timer() {
      this.timerId = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--;
        } else {
          clearInterval(this.timerId);
          this.$refs.keyboard.showAnswer(this.answer);
          this.isClick2 = true;
          this.isClick1 = false;
        }
      }, 1000);
    },
    determineChoice() {
      if (this.isClick1) {
        if (!this.answer) {
          this.showTips = true;
          setTimeout(() => {
            this.showTips = false;
          }, 2000);
          return;
        }
        if (this.timerId) {
          clearInterval(this.timerId);
        }
        this.$refs.keyboard.showAnswer(this.answer);
        this.isClick2 = true;
        this.isClick1 = false;
      }
    },
    moreInformation() {
      if (this.isClick2) {
        this.isShowMeaning = true;
        this.answer = "";
        this.$refs.keyboard.initSyllabic(false);
        setTimeout(() => {
          this.isClick2 = false;
          this.isClick3 = true;
        }, 50);
      }
    },
    nextQuestion() {
      if (this.isClick3) {
        this.isClick3 = false;
        this.isClick1 = true;
        this.$emit("change");
      }
    },
    wordPassSave() {
      this.$emit("save", this.wordData.id, this.isCorrect);
    },
    updateAnswer(answer) {
      this.answer = answer.join("");
    },
    answerInformation(flag) {
      if (!this.isSyllabic) {
        if (flag) {
          this.isCorrect = true;
        } else {
          this.isCorrect = false;
        }
        this.wordPassSave();
        this.isShowAnswer = true;
      } else {
        this.isCorrect = true;
        this.isSyllabicSpelling = false;
      }
    },
    wordMeaningSwitch() {
      this.isShowWordMeaning = !this.isShowWordMeaning;
      this.wordMeaningText = this.wordMeaningText === "显示" ? "隐藏" : "显示";
    },
    syllabicSpelling() {
      this.isSyllabic = true;
      this.isSyllabicSpelling = true;
      this.answer = "";
      this.$refs.keyboard.initSyllabic(true);
    },
    inputWord() {
      this.$refs.keyboard.checkLetter(this.answer.split(""));
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./WordListen.scss";
</style>
